import React, { useState, useEffect, useCallback } from 'react';
import { Table as AntdTable } from '@maycur/antd5';
import sample2 from '../data/sample2';
import Table from '../../../Table';
 import { FilterDropDown } from '@maycur/business'; 
import i18n from './i18n';
//const FilterDropDown = {};
 const {
    DateFilter,
    //FuzzFilter,
    CheckFilter,
   // DepartmentPickerFilter,
    NumberRangeFilter,
   // BudgetmentFilter,
   // BudgetmentNewFilter,
   // BudgetSubjectFilter,
   // OptionFilter,
   // TradingPartnerFilter, 
   // CustomTagSelectFilter,
   // TreeFilter,
   // StuffSelectionFilter,
   // OptionFilterNew,
   // DayFilter
} = FilterDropDown;

function mockBackEndDataFetch(number, size) {
    return new Promise((r) => {
        setTimeout(() => {
            r({
                code: 'ACK',
                data: {
                    data: sample2.data.slice((number - 1) * size, number * size),
                    total: sample2.data.length,
                }
            })
        }, 500);
    });
}
const TemplateFrozenCols = (args) => {
    const { height, search } = args;
    const [dataSource, setDataSource] = useState([]);
    const [pagination, setPagination] = useState({ size: 10 });
    const [loading, setLoading] = useState(false);
    const [ready, setReady] = useState(false);
    const fetchData = useCallback((filters, pagination, sorter, search ) => {        
        return mockBackEndDataFetch(pagination.current, pagination.pageSize).then((resp) => {
            setDataSource(resp.data.data);
            setPagination((d) => { return { ...d, total: resp.data.total } });
            return resp.data;
        });
    }, []);

    useEffect(() => {
        setLoading(true);
        i18n.init().then(() => {
            setReady(true);
            /* fetchData({ current: 1, size: 10 }).finally(() => {
                setLoading(false);
            }); */
        })
    }, [])

    const  filterMap = {
        'dateRange': DateFilter,
       // 'search': FuzzFilter,
        'checkbox': CheckFilter,
       // 'legalEntity': CheckFilter,
       // 'department': DepartmentPickerFilter,
        'numberRange': NumberRangeFilter,
       // 'budgetment': BudgetmentFilter, //预算组织筛选框
       // 'budgetmentNew': BudgetmentNewFilter, //预算组织筛选框
       // 'budgetSubject': BudgetSubjectFilter, //预算科目筛选框
       // 'option': OptionFilterNew, // 选项筛选框
       // 'tradingPartner': TradingPartnerFilter,
       // 'customTagSelect': CustomTagSelectFilter, // 自定义标签筛选
       // 'tree': TreeFilter, // 树选择
       // 'transfer': StuffSelectionFilter, // 公司抬头筛选框
       // 'dayRange': DayFilter
    };
    return (
        <div style={{ height }} className="table-box">
            <div className="table-main">
                {
                    ready &&
                    <Table
                        dataSource={dataSource}
                        rowKey={'name'}
                        columns={sample2.columns}
                        style={{ flex: 1 }}
                        filterBar={{
                            filterDropdownMap: filterMap
                        }}
                        defaultFilter={
                            {
                                "name":[
                                    {
                                        "value": "1",
                                        "text": "Jack"
                                    }
                                ]
                            }
                        }
                        defaultSort={{
                            field: "start",
                            order: "descend"
                        }}
                        search={search}
                        fetchData={fetchData}
                        rowSelection = {{ preserveSelectedRowKeys:true }}
                    /> 
                }
            </div>

        </div>
    )
}
export default TemplateFrozenCols;